@import '../AccountController/style'

.accountSelector
  position absolute
  top 80px
  right 8px
  bottom 40px
  left 8px
  border-radius 26px
  z-index 999
  display flex
  align-items center
  overflow hidden
  display flex
  justify-content center
  align-items center
  transform translateY(0px)
  transition var(--standardFast)

  .accountSelectorScroll
    width 100%
    max-height 100%
    border-radius 30px
    transition var(--standard)
    overflow-y scroll
    overflow-x hidden

    .accountSelectorScrollWrap
      width 100%
      padding 48px 6px 48px 6px
      box-sizing border-box
      will-change scroll-position
      z-index 999
      pointer-events none

      .noSigners
        width 100%
        display flex
        justify-content center
        align-items center
        flex-direction column
        font-weight 300
        font-size 19px
        position relative
        z-index 100
        padding 24px

        .introLogo
          padding-bottom 38px

          svg
            fill var(--outerspace)

        .getStarted
          margin-top 30px
          box-sizing border-box
          border-radius 12px
          padding 20px
          font-size 14px
          margin 20px
          text-align center
          font-weight 300
          background var(--outerspace)
          color var(--spacewhite)
          line-height 24px

          .getStartedPlus
            display inline-block
            position relative
            top 4px
            border 2px solid var(--spacewhite)
            width 43px
            height 22px
            border-radius 11px
            text-align center
            margin 0px 5px 0px 5px
            box-sizing border-box

            span 
              position relative
              top -3px
              left 2px
              font-size 17px

        .featureBox
          display flex
          justify-content center
          align-items center
          flex-direction column
          margin-top 30px

          .featureBoxText
            font-size 13px
            font-weight 400
            letter-spacing 4px

          .featureBoxSubtext
            margin-top 8px
            font-size 10px
            font-family 'FiraCode'
            justify-content center
            opacity 0.7

@keyframes appear
  0%
    filter blur(10px)
    opacity 0

  100%
    filter blur(0px)
    opacity 1

.panelFilterMain
  position fixed
  top 0px
  left 0px
  right 0px
  height 48px
  z-index 99
  overflow hidden
  animation appear 1s cubic-bezier(.82,0,.12,1)

.panelFilterAccount
  position sticky
  top 0px
  left 0px
  right 0px
  height 48px
  width 100%
  z-index 99
  overflow hidden
  animation appear 1s cubic-bezier(.82,0,.12,1)

.panelFilterIcon
  position absolute
  top 4px
  left 0
  bottom 0
  width 48px
  display flex
  justify-content center
  align-items center

.panelFilterInput
  position absolute
  top 0
  left 30px
  bottom 0
  right 30px

  input, input:hover, input:focus
    width 100%
    height 100%
    border none
    outline none
    text-align center
    background transparent
    color var(--outerspace)
    font-size 20px
    font-family 'MainFont'
    font-weight 300
    box-shadow none

.panelFilterClear
  position absolute
  top 8px
  right 3px
  bottom 8px
  width 40px
  display flex
  justify-content center
  align-items center
  color var(--outerspace)
  cursor pointer
  border-radius 20px

  *
    pointer-events none

.panelFilterClear:hover
  background var(--ghostA)

.accountSelectorOpen
  transform translateY(-14px)
  transition var(--standard)
  z-index 999999999
  pointer-events none
  *
    pointer-events none

.newAccountButton
  display flex
  padding 16px
  color var(--good)
  font-weight 400

  .newAccountIcon
    padding-right 10px
